<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目配置调试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .project-info {
            border: 1px solid #ddd;
            padding: 15px;
            margin: 10px 0;
            border-radius: 5px;
            background: #f9f9f9;
        }
        .field-type {
            background: #e8f4fd;
            padding: 10px;
            margin: 5px 0;
            border-radius: 3px;
            border-left: 4px solid #007bff;
        }
        pre {
            background: #f8f9fa;
            padding: 10px;
            border-radius: 5px;
            overflow-x: auto;
        }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>项目配置调试工具</h1>
        <p>用于检查项目19和20的配置数据</p>
        
        <div>
            <button onclick="loadProject(19)">加载项目19</button>
            <button onclick="loadProject(20)">加载项目20</button>
            <button onclick="loadProjectShare('test-token')">测试分享令牌</button>
        </div>
        
        <div id="result"></div>
    </div>

    <script>
        async function loadProject(projectId) {
            try {
                const response = await fetch(`/projects/${projectId}`);
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }
                const project = await response.json();
                displayProjectData(project, `项目 ${projectId}`);
            } catch (error) {
                document.getElementById('result').innerHTML = `
                    <div class="project-info">
                        <h3>加载项目 ${projectId} 失败</h3>
                        <p style="color: red;">${error.message}</p>
                    </div>
                `;
            }
        }
        
        async function loadProjectShare(shareToken) {
            try {
                const response = await fetch(`/project-shares/token/${shareToken}`);
                if (!response.ok) {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }
                const data = await response.json();
                displayProjectData(data.project, `分享项目 (${shareToken})`);
            } catch (error) {
                document.getElementById('result').innerHTML = `
                    <div class="project-info">
                        <h3>加载分享项目失败</h3>
                        <p style="color: red;">${error.message}</p>
                    </div>
                `;
            }
        }
        
        function displayProjectData(project, title) {
            let html = `
                <div class="project-info">
                    <h3>${title}</h3>
                    <p><strong>项目名称:</strong> ${project.name || '未设置'}</p>
                    <p><strong>项目描述:</strong> ${project.description || '未设置'}</p>
                    <p><strong>主图片:</strong> ${project.mainImage || '未设置'}</p>
                    
                    <h4>表单配置 (formConfig):</h4>
            `;
            
            if (project.formConfig) {
                html += `
                    <p><strong>配置ID:</strong> ${project.formConfig.id}</p>
                    <p><strong>配置名称:</strong> ${project.formConfig.name}</p>
                    
                    <h5>字段类型 (fieldTypes):</h5>
                `;
                
                if (project.formConfig.fieldTypes && project.formConfig.fieldTypes.length > 0) {
                    project.formConfig.fieldTypes.forEach(fieldType => {
                        html += `
                            <div class="field-type">
                                <strong>${fieldType.label}</strong> (${fieldType.key})<br>
                                类型: ${fieldType.type} | 
                                必填: ${fieldType.required ? '是' : '否'} | 
                                启用: ${fieldType.enabled ? '是' : '否'} | 
                                排序: ${fieldType.sortOrder}
                                ${fieldType.options ? `<br>选项: ${fieldType.options.join(', ')}` : ''}
                            </div>
                        `;
                    });
                } else {
                    html += '<p style="color: orange;">没有配置字段类型</p>';
                }
                
                html += `
                    <h5>字段标签 (fieldLabels):</h5>
                    <pre>${JSON.stringify(project.formConfig.fieldLabels, null, 2)}</pre>
                `;
            } else {
                html += '<p style="color: red;">没有表单配置 (formConfig 为 null)</p>';
            }
            
            html += `
                    <h4>原始数据:</h4>
                    <pre>${JSON.stringify(project, null, 2)}</pre>
                </div>
            `;
            
            document.getElementById('result').innerHTML = html;
        }
    </script>
</body>
</html>